<template>
  <el-dialog title="新增员工" :visible="showDialog" width="40%" @close="cancel">
    <el-form
      ref="employeeRef"
      :model="employeeForm"
      :rules="employeeRules"
      label-width="120px"
    >
      <el-form-item label="姓名:" prop="username">
        <el-input
          v-model="employeeForm.username"
          class="width70"
          placeholder="请输入姓名"
        />
      </el-form-item>
      <el-form-item label="手机号:" prop="mobile">
        <el-input
          v-model="employeeForm.mobile"
          class="width70"
          placeholder="请输入手机号"
        />
      </el-form-item>
      <el-form-item label="入职时间:" prop="timeOfEntry">
        <el-date-picker
          v-model="employeeForm.timeOfEntry"
          class="width70"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="聘用形式:" prop="formOfEmployment">
        <el-select
          v-model="employeeForm.formOfEmployment"
          class="width70"
          placeholder="请选择聘用形式"
        >
          <el-option
            v-for="item in hireType"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工号:" prop="workNumber">
        <el-input
          v-model="employeeForm.workNumber"
          class="width70"
          placeholder="请输入工号"
        />
      </el-form-item>
      <el-form-item label="部门:" prop="departmentName">
        <el-input
          v-model="employeeForm.departmentName"
          class="width70"
          placeholder="请输入部门名称"
          @focus="loadDepartments"
        />
        <el-tree
          v-if="showTree"
          v-loading="loading"
          :data="treeData"
          default-expand-all
          :props="{ label: 'name' }"
          @node-click="selectNode"
        />
      </el-form-item>
      <el-form-item label="转正时间:" prop="correctionTime">
        <el-date-picker
          v-model="employeeForm.correctionTime"
          class="width70"
          type="date"
          placeholder="请选择转正时间"
        />
      </el-form-item>
    </el-form>
    <el-row
      type="flex"
      align="center"
      justify="center"
      style="margin-top: 20px"
    >
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { getDepartments } from '@/api/departments'
import { rsolveList2Tree } from '@/utils'
import EmployeeEnum from '@/api/constant/employees'
import { addEmployee } from '@/api/employees'

export default {
  name: 'AddEmployee',
  props: {
    showDialog: {
      type: Boolean,
      required: false
    }
  },
  data() {
    return {
      employeeForm: {
        username: '', // 姓名
        mobile: '', // 手机号
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: '', // 组织名称
        timeOfEntry: '', // 入职时间
        correctionTime: '' // 转正时间
      },
      employeeRules: {
        username: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 4,
            message: '用户姓名为1-4位',
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        timeOfEntry: [
          {
            required: true,
            message: '请选择入职时间',
            trigger: 'blur'
          }
        ],
        formOfEmployment: [
          {
            required: true,
            message: '请选择聘用方式',
            trigger: 'change'
          }
        ],
        workNumber: [
          {
            required: true,
            message: '请填写工号',
            trigger: 'blur'
          }
        ],
        departmentName: [
          {
            required: true,
            message: '请填写部门',
            trigger: 'blur'
          }
        ],
        correctionTime: [
          {
            required: true,
            message: '请填写转正时间',
            trigger: 'blur'
          }
        ]
      },
      treeData: [], // 定义数组接收树形数据
      showTree: false, // 控制树形的显示或者隐藏
      loading: false, // 控制树的显示或者隐藏进度条
      hireType: EmployeeEnum.hireType
    }
  },
  methods: {
    confirm() {
      this.$refs.employeeRef.validate(async isOK => {
        if (isOK) {
          await addEmployee(this.employeeForm)
          this.$message.success('添加员工成功')
          this.cancel()
        }
      })
    },
    async loadDepartments() {
      this.showTree = true
      this.loading = true
      const { depts } = await getDepartments()
      this.treeData = rsolveList2Tree(depts)
      this.loading = false
    },
    selectNode(node) {
      this.employeeForm.departmentName = node.name
      this.showTree = false
    },
    cancel() {
      this.$refs.employeeRef.resetFields()
      this.$emit('update-employee', false)
    }
  }
}
</script>

<style>
.el-date-editor.el-input {
  width: 70%;
}

.width70 {
  width: 70%;
}

.el-tree {
  border: 1px solid #ededed;
  border-radius: 5px;
}
</style>
